<template>
	<page-meta :page-style="'overflow:' + (filterPopShow ? 'hidden' : 'visible')"></page-meta>
	<view class="container">
		<u-sticky>
			<view class="search-wrap">
				<uni-search-bar placeholder="输入商品分类、名称" @confirm="getData(true)" radius="20" v-model="params.searchName"
					cancelText="搜索" cancelButton="always" @cancel="getData(true)" @clear="handleClear">
				</uni-search-bar>
			</view>
			<view class="fliter-box" v-if="isSearching">
				<zero-filter-bar ref="zeroFilterBar" :dataList="filterList" :hasFilter="hasFilter" :needSticky="false"
					:extraBtn="false" selectColor="#F08519" @filter='handleFilterItem' />
			</view>
		</u-sticky>
		<view class="list-wrap" v-if="isSearching">
			<view class="mt_8 mr_12 mb_8 ml_12 p_12 br_8" :style="[cardStyle]" v-if="dataList.length">
				<view class="list-box fx fx_w jcb">
					<GoodsCard :type="isIntegral?'integral_card':'vertical-card'" :goodsType="$utils.goodsTypeDir(item.goodsType)" :showIcon="true" :data="item" v-for="item,index in dataList" :key="index" />
				</view>
				<view class="pt_24">
					<u-loadmore :status="loadingStatus" />
				</view>
			</view>
			<view class="pt_38" v-if="!loading&&!dataList.length">
				<Empty type="search" size="86" />
			</view>
		</view>
		<SearchHistory v-if="!isSearching" :history="searchHistory" @search="handleQuickSearch"
			@clear="searchHistory=[]" />
		<PopupFilter :data="filterParams" :originData="filterOriginParams" :show="filterPopShow" @confirm="handleConfirmFilter"
			@close="filterPopShow=false" />
	</view>
</template>

<script>
	import api from '@/service/config/api'
	import Tabs from '@/components/Tabs.vue'
	import GoodsCard from '@/components/goods/GoodsCard.vue'
	import SearchHistory from '../components/SearchHistory.vue'
	import PopupFilter from '@/components/goods/PopupFilter.vue'
	import Empty from '@/components/Empty'
	import dataMixin from '@/mixins/data.js'
	import filterMixin from '@/mixins/filter.js'
	import {
		mapState
	} from 'vuex'
	export default {
		mixins: [dataMixin, filterMixin],
		components: {
			Tabs,
			GoodsCard,
			SearchHistory,
			PopupFilter,
			Empty
		},
		data() {
			return {
				searchValue: '', // 搜索内容
				tabConfig: {
					underLineWidth: 28,
					fontSize: 28,
					color: '#999999',
					activeColor: '#F08519',
					underLineColor: '#F08519',
				}, // tabs配置
				filterList: [{
						id: 0,
						name: '综合',
					},
					{
						id: 1,
						name: '销量',
						sort: true
					},
					{
						id: 2,
						name: '价格',
						sort: true
					},
					{
						id: 3,
						name: '筛选',
						filter: true,
					},
				], // 筛选项
				loading: true,
				initLoading: true,
				filterPopShow: false, // 筛选开关
				listUrl: '/goods/api/product/productList',
				dataList: [],
				params: {
					orderBy: 0,
					searchName: '',
					customerId: this.$storage.getItem('basicUnserInfo').customerId || '',
					appletType: this.$store.state.appType === this.$base.ADMIN_TYPE ? 0 : 1,
				},
				isSearching: false, // 是否在搜索中
				searchHistory: [], // 历史搜索
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
				brandName: '',
				brandId: '',
				isIntegral: false,
			}
		},
		computed: {
			...mapState(['userType', 'appType']),
			// 是否筛选
			hasFilter() {
				const {
					brandSelect,
					styleSelect,
					materialSelect,
					minPrice,
					maxPrice
				} = this.filterParams
				return !!brandSelect || !!styleSelect || !!materialSelect || !!minPrice || !!maxPrice
			},
			cardStyle() {
				return this.isIntegral?{
					padding: '12rpx'
				}:{
				}
			}
		},
		onLoad(options) {
			// this.getData(true)
			if (options.type == 'vip') {
				this.listUrl = '/goods/api/product/membershipChainProductList'
			}
			if (options.type == 'integral') {
				this.isIntegral = true
				this.listUrl = '/goods/api/product/integraProductList'
			}
			this.brandId = options.brandId || ''
			this.brandName = options.brandName || ''
			this.typeId = options.typeId || ''
			this.typeName = options.typeName || ''
			if (this.$store.state.userInfo.customerId) {
				this.$set(this.params, 'customerId', this.$store.state.userInfo.customerId)
			}
			this.$set(this.params, 'userType', this.$store.state.userInfo.identityType || 1)
			if (options.brandId) {
				uni.setNavigationBarTitle({
					title: options.brandName ? options.brandName + '品牌' : '品牌搜索'
				})
				this.$set(this.params, 'brandId', options.brandId)
				this.getData(true)
			}
			if (options.typeName && options.typeId) {
				uni.setNavigationBarTitle({
					title: `【${options.typeName}】搜索`
				})
				this.$set(this.params, 'productTypeId', options.typeId)
				this.getData(true)
			}
			this.getFilterData()
			if (this.$storage.getItem('searchHistory')) {
				this.searchHistory = this.$storage.getItem('searchHistory').split(',')
			}
		},
		onUnload() {
			this.$storage.setItem('searchHistory', this.searchHistory.join(','))
		},
		onReachBottom() {
			if (this.loadingStatus == 'no-more')
				return
			this.loadingStatus = 'loading'
			setTimeout(() => {
				this.loadingStatus = 'no-more'
			}, 1000)
		},
		methods: {
			getDataNext() {
				if (!this.searchHistory.includes(this.params.searchName)) {
					this.searchHistory.unshift(this.params.searchName)
					this.searchHistory = this.searchHistory.filter(item => !!item).slice(0, 10)
				}
			},
			// 选择筛选项
			handleFilterItem(index, desc, item) {
				switch (index) {
					case 0:
						this.params.orderBy = 0
						this.getData(true);
						break;
					case 1:
						this.params.orderBy = desc ? 1 : 2
						this.getData(true);
						break;
					case 2:
						this.params.orderBy = desc ? 3 : 4
						this.getData(true);
						break;
					case 3:
						this.filterPopShow = !this.filterPopShow
						break;
					default:
						break;
				}
			},
			// 点击商品
			handleClickGoods(item) {
				uni.navigateTo({
					url: '/pages/goods/pages/detail?id=' + item.id
				})
			},
			getFilterData() {
				this.$utils.loading()
				let p = Promise.all([this.getBrandList(), this.getStyleList(), this.getMaterialList()])
				p.finally(() => {
					uni.hideLoading()
				})
			},
			// 获取商品品牌
			getBrandList() {
				if (this.brandId) return true
				return new Promise(resolve => {
					api.get('/goods/api/product/getBrandList', {
						functionRange: this.$store.state.functionRange
					}, {
						noHideLoading: true
					}).then(res => {
						this.$set(this.filterParams, 'brandList', res.data)
						this.$set(this.filterOriginParams, 'brandList', res.data)
					}).finally(() => {
						resolve()
					})
				})
			},
			// 获取商品风格
			getStyleList() {
				return new Promise(resolve => {
					api.get('/goods/api/product/getStyleList', {}, {
						noHideLoading: true
					}).then(res => {
						this.$set(this.filterParams, 'styleList', res.data)
						this.$set(this.filterOriginParams, 'styleList', res.data)
					}).finally(() => {
						resolve()
					})
				})
			},
			// 获取商品材质
			getMaterialList() {
				return new Promise(resolve => {
					api.get('/goods/api/product/getMaterialList', {}, {
						noHideLoading: true
					}).then(res => {
						this.$set(this.filterParams, 'materialList', res.data)
						this.$set(this.filterOriginParams, 'materialList', res.data)
					}).finally(() => {
						resolve()
					})
				})
			},
			// 快速搜索
			handleQuickSearch(item) {
				this.$set(this.params, 'searchName', item)
				this.getData(true)
			},
			handleClear() {
				this.$set(this.params, 'searchName', '')
				// if (this.brandId) return
				this.isSearching = false
				this.filterParams = {
					...this.filterParams,
					brandSelect: '',
					styleSelect: '',
					materialSelect: '',
					minPrice: null,
					maxPrice: null,
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		.search-wrap {
			background: #fff;

			.uni-searchbar {
				padding: 20rpx 34rpx;

				/deep/.uni-searchbar__box {
					border-radius: 164rpx !important;
					height: 72rpx;
				}

				/deep/.uniui-search {
					color: #CCCCCC !important;
				}

				/deep/.uni-searchbar__cancel {
					line-height: 72rpx;
					padding-left: 52rpx;
				}
			}

			/deep/.uni-searchbar__box {
				justify-content: flex-start;
			}
		}

		.list-wrap {
			.list-box {
				margin-top: -10rpx;
			}
		}

		.fixed-menu-wrap {
			position: fixed;
			right: 12rpx;
			bottom: 92rpx;
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			box-shadow: 0 8rpx 24rpx 0 rgba(0, 0, 0, 0.1);

			image {
				width: 100%;
				height: 100%;
			}
		}

		.pop_content {
			min-height: 100%;
			padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
			padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));

			.search_item {
				background: #F2F2F2;
			}

			/deep/.u-input input {
				text-align: center !important;
			}

			.bottom_wrap {
				@include safe_area_bottom;
			}
		}

	}
</style>